<template>
  <div class="progress" @click.stop="point" ref="progress">
    <!--进度条-->
    <div class="progress-line"></div>
    <!-- 进度条背景 -->
    <div class="progress-bg" :style="{ width: progressWidth }">
      <!-- 进度条按钮 -->
      <div class="progress-btn" @mousedown.self.stop="move()"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["progressWidth"], // 接收进度条宽度
  methods: {
    move() {
      const self = this;
      document.onmousemove = (e) => {
        self.setProgressLine(e, false);
      };

      // 拖拽进度条的时候 禁止页面文字选中
      document.body.onselectstart = function () {
        return false;
      };

      document.onmouseup = function (e) {
        // 拖拽结束时候 设置当前音频时间
        self.setProgressLine(e);
        document.onmousemove =
          document.onmouseup =
          document.body.onselectstart =
            null;
      };

      return false;
    },
    // 点击音频进度条
    point(e) {
      this.setProgressLine(e);
    },
    setProgressLine(e, flag = true) {
      const self = this;
      const $progress = self.$refs.progress;
      //  实时获取鼠标横坐标，若是超过进度条最大宽度，则值为进度条的宽度
      const curProgress =
        e.clientX - this.getOffsetLeft($progress) >= $progress.offsetWidth
          ? $progress.offsetWidth
          : e.clientX - this.getOffsetLeft($progress) <= 0
          ? 0
          : e.clientX - this.getOffsetLeft($progress);

      self.$emit("setProgressLine", {
        val: curProgress / $progress.offsetWidth,
        flag: flag,
      });
    },
    // 元素左侧偏移量
    getOffsetLeft(obj) {
      let oLeft = obj.offsetLeft;
      let oParent = obj.offsetParent;

      while (oParent !== null) {
        oLeft += oParent.offsetLeft;
        oParent = oParent.offsetParent;
      }

      return oLeft;
    },
  },
};
</script>
<style lang="less">
@color-theme: #3d74f0;
.progress {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  cursor: pointer;

  .progress-line {
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #eee;
  }

  .progress-bg {
    position: absolute;
    width: 0;
    height: 4px;
    border-radius: 2px;
    background: -moz-linear-gradient(
      left,
      rgba(@color-theme, 1) 0%,
      rgba(0, 255, 187, 0.77) 10%,
      rgba(@color-theme, 0.8) 50%,
      @color-theme 70%,
      rgba(149, 0, 255, 0.77) 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
      left,
      rgba(@color-theme, 1) 0%,
      rgba(0, 255, 238, 0.77) 10%,
      rgba(@color-theme, 0.8) 50%,
      @color-theme 70%,
      rgb(50, 170, 255) 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      to right,
      rgba(@color-theme, 1) 0%,
      rgba(255, 0, 195, 0.77) 10%,
      rgba(@color-theme, 0.8) 50%,
      @color-theme 70%,
      rgb(50, 255, 224) 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ff7832',GradientType=1 ); /* IE6-9 */
  }

  .progress-btn {
    position: absolute;
    right: -6px;
    width: 4px;
    height: 4px;
    border: 4px solid @color-theme;
    top: -4px;
    background: #fff;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
    transition: all 0.3s;
    border-radius: 50%;
    cursor: grab;
  }
}
</style>